<template>
  <div id="app">
    <div class="header">
      <h3>老王商城</h3>
    </div>
    <div class="main">
      <router-view></router-view>
    </div>
    <div class="footer">
      <ul class="nav">
        <!-- router-link 默认会被解析为a标签 -->
        <!-- vue2 中可以给router-link绑定 tag属性   -> 设置router-lin解析时的标签名 -->
        <!-- 在没有设置 exact之前属于模糊匹配   /list也包含/  => 设置了exact之后就变为精确匹配   / => /  -->
        <router-link tag="li" exact-active-class="exact-active" active-class="active" exact to="/">首页</router-link>
        <router-link tag="li" exact-active-class="exact-active" active-class="active" exact to="/list">列表</router-link>
        <router-link tag="li" exact-active-class="exact-active" active-class="active" exact to="/car">购物车</router-link>
        <router-link tag="li" exact-active-class="exact-active" active-class="active" exact to="/mine">我的</router-link>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name:"RootView",
    data(){
        return {
            user:"",
            pwd:"",
        }
    },
    provide(){
      return {
        user:()=>this.user,
        updateUser:(v)=>this.user = v,
        pwd:()=>this.pwd,
        updatePwd:(v)=>this.pwd = v,

      }
    }
  }


</script>


<style>
* {
  padding: 0;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
li {
  list-style: none;
}

img {
  vertical-align: top;
}

input {
  outline: none;
}

textarea {
  resize: none;
}


body,
html,
#app {
  width: 100vw;
  height: 100vh;
}

html {
  font-size: -webkit-calc(100vw / 7.5);
}

body {
  font-size: 0.24rem;
}

#app {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.header {
  width: 100%;
  height: 0.75rem;
  text-align: center;
  line-height: 0.75rem;
  color: #fff;
  background-color: grey;
}

.main {
  flex: 1;
  overflow-y: auto;
}

.footer {
  width: 100%;
  height: 0.75rem;
  text-align: center;
  line-height: 0.75rem;
  color: #fff;
  background-color: grey;
}

.footer .nav {
  display: flex;
}

.footer .nav li {
  flex: 1;
}

.footer .nav .router-link-exact-active {
  color: aquamarine;
}
.footer .nav .exact-active {
  color: aquamarine;
}
</style>
